<template>
  <div class="row">
    <div class="container">
      <div class="row">
        <div class="col">
          <p>
            <code>请在心中默想一个在20和100之间的数字，想好了吗？现在，将这个数字的十位和个位相加，再用这个数字减去得到的和。然后，将得到的差的十位与个位数字相加，你得到的和是数字9吗？（如果不是9，请检查前面的运算是否出错了。）有意思吧！数学中有无数类似的神奇现象，但是我们大多数人在学校里却无缘接触它们。本书将告诉读者，数字、图形和纯逻辑可以产生令人惊喜的效果。此外，只需掌握一点儿代数或几何学知识，你就会发现这些神奇现象背后的奥秘并非那么复杂，你自己甚至也有可能发现一些数学之美。</code>
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <el-input-number
            v-model="num1"
            @change="handleChange"
            :min="21"
            :max="99"
            label="输入一个20-100的数字"
          ></el-input-number>
          <p>
            <span>十位数</span>
            <span>{{ Tnum }}</span>
          </p>
          <p>
            <span>个位数</span>
            <span>{{Gnum}}</span>
          </p>
          <p>
            <span>十与个位数相加</span>
            <span>{{ Tnum+ Gnum }}</span>
          </p>
          <p>
            <span>这个数字减去得到的和</span>
            <span>{{ num1 -Tnum - Gnum }}</span>
          </p>
          <p>
            <span>得到的差的十位</span>
            <span>{{ XTnum }}</span>
          </p>
          <p>
            <span>得到的差的个位</span>
            <span>{{ XGnum }}</span>
          </p>
          <p>
            <span>得到的值</span>
            <span>{{ XTnum + XGnum }} ？</span>
          </p>
        </div>
      </div>
      <div class="row">
        <NextRouter v-bind="{nextRouter}"></NextRouter>
      </div>
    </div>
  </div>
</template>


<script lang="ts">
import { Component, Prop, Vue, Provide } from "vue-property-decorator";
import NextRouter from "@/components/next/nextRouter.vue";

@Component({
  data() {
    return {
      nextRouter: "Dance"
    };
  },
  components: {
    NextRouter
  }
})
export default class HelloWorld extends Vue {
  @Provide() num1: number = 25;
  @Provide() Tnum: number = 2;
  @Provide() Gnum: number = 5;
  @Provide() XTnum: number = 1;
  @Provide() XGnum: number = 8;
  handleChange(v: number) {
    this.Tnum = Math.trunc(v / 10);
    this.Gnum = Math.trunc(v % 10);
    this.XTnum = Math.trunc((v - Math.trunc(v / 10) - Math.trunc(v % 10)) / 10);
    this.XGnum = Math.trunc((v - Math.trunc(v / 10) - Math.trunc(v % 10)) % 10);
  }
}
</script>


<style  scoped lang="scss">
.container {
  background-color: #ffffff;
}
p {
  text-indent: 2rem;
}
</style>

